<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<%@include file="/common/taglibs.jsp" %>
<%@include file="/common/javascript.jsp" %>
<html>
<head>
<meta charset="utf-8">
<title>市区统计数据</title>
    <script type="text/javascript">
    	var chart;
		$(function(){
			$("#dg").datagrid({url:'cityGrid_getAllRecords',rownumbers:true,singleSelect:false,selectOnCheck:true,
					fitColumns:true,pagination:true,loadMsg:'数据加载中...',pageSize:5,pageList:[5,10,15],
					frozenColumns:[[     
                  		{field:'ck',checkbox:true}
            		]],
					columns:[[    
						{field:'id',title:"序号",width:120,align:'center',hidden:true}, 
						{field:'num',title:"编号",width:120,align:'center'},
						{field:'name',title:"项目名称",width:100,align:'center'},
						{field:'company',title:"开发公司",width:100,align:'center'},
						{field:'regionname',title:"行政区域",width:100,align:'center'},
						{field:'type',title:"物业类型",width:100,align:'center'},
						{field:'p_status',title:"楼盘状态",width:100,align:'center'},
						{field:'housetype',title:"户型",width:80,align:'center'}, 
						{field:'housearea',title:"户型面积(平米)",width:100,align:'center'},
						{field:'totalarea',title:"总建面",width:100,align:'center'},
						{field:'totalts',title:"总套数",width:100,align:'center'},
						{field:'totalbuilding',title:"楼栋数",width:100,align:'center'},
						{field:'ytparea',title:"已推盘面积(平米)",width:120,align:'center'},
						{field:'ytpts',title:"已推盘套数",width:120,align:'center'}, 
						{field:'ysarea',title:"已售面积(平米)",width:100,align:'center'},
						{field:'ysts',title:"已售套数",width:100,align:'center'},
						{field:'averageprice',title:"销售均价(元)",width:100,align:'center'},
						{field:'remark',title:"备注",width:80,align:'center'}
					]],
					onLoadSuccess:function(){
						refresh();
					}    
			});

			$("#dg").datagrid('getPager').pagination({//分页栏下方文字显示ß
				showPageList:false,
				beforePageText:'第',
				afterPageText: '页    共 {pages} 页',            
			    displayMsg:'当前显示从第{from}条到{to}条 共{total}条记录'
			});
			
			$("#btnAdd").bind('click',function(){
				pageLoading(window.frames["openFrame"].document);
				$("#openFrame")[0].src="cityAction_toForm?viewType=add";
				$("#content").dialog({ title:'增加', width:650, height:400, closed:true, 
					minimizable:true, maximizable:true, modal:true,resizable:true,
					buttons:[{
					  text:'保存',
							handler:function(){
								openFrame.window.saveInfo();
							}
						},{
							text:'关闭',
							handler:function(){
								$("#content").dialog('close');
							}
						}]
				});
				$("#content").dialog('open');
			});
			
			$("#btnEdit").bind('click',function(){
				var rows=$("#dg").datagrid('getSelections');
				if(rows && rows.length>1){
					window.parent.window.$.messager.alert('提示','请选择单一数据项修改',"info");
				}else{
					var row =$("#dg").datagrid('getSelected');
					if(row){
						pageLoading(window.frames["openFrame"].document);
						$("#openFrame")[0].src="cityAction_toForm?viewType=modify&model.cid="+row.id;
						$("#content").dialog({ title:'修改', width:650, height:400, 
							closed:true, minimizable:true, maximizable:true,
							modal:true,resizable:true,
							buttons:[{
							  text:'保存',
									handler:function(){
										openFrame.window.saveInfo();
									}
								},{
									text:'关闭',
									handler:function(){
										$("#content").dialog('close');
									}
								}]
						});
						$("#content").dialog('open');
					}else{
						window.parent.window.$.messager.alert('提示','请先选择要修改的数据项',"info");
					}	
				}
			});
			
			$("#btnDelete").bind('click',function(){
				var rows=$("#dg").datagrid('getSelections');
				if(rows!=null && rows.length>0){
					window.parent.window.$.messager.confirm('提示','确定要删除吗？',function(r){
						if (r){  
							var ids="";
							for(var i=0;i<rows.length;i++){
								ids+=rows[i].id;
							}
							$.post("cityAction_delete",{ids:ids},function(data){
								var data = eval('(' + data + ')');
								if (!data.success){ //删除失败  
									window.parent.window.$.messager.alert('提示',"错误"+data.message,"info");
        						}else{//删除成功
        							window.parent.window.$.messager.alert('提示',data.message,"info",function(){
        								$('#dg').datagrid('reload'); //刷新网格
        								refresh(); //刷新统计数据
        							});
        						} 
							});
						}
					});
				}else{
					window.parent.window.$.messager.alert('提示','请先选择要删除的数据项',"info");
				}
			});
			
			//详情
			$("#btnDetail").bind('click',function(){
				var rows=$("#dg").datagrid('getSelections');
				if(rows && rows.length>1){
					window.parent.window.$.messager.alert('提示','请选择单一数据项修改',"info");
				}else{
					var row =$("#dg").datagrid('getSelected');
					if(row){
						pageLoading(document.frames["openFrame"].document);
						$("#openFrame")[0].src="cityAction_toForm?viewType=detail&model.cid="+row.id;
						$("#content").dialog({ title:'详情', width:650, height:400, 
							closed:true, minimizable:true, maximizable:true,
							modal:true,resizable:true,
							buttons:[{
									text:'关闭',
									handler:function(){
										$("#content").dialog('close');
									}
								}]
						});
						$("#content").dialog('open');
					}else{
						window.parent.window.$.messager.alert('提示','请先选择要修改的数据项',"info");
					}	
				}
			});
			
			//最新动态
			$("#btnNew").bind('click',function(){
				var rows=$("#dg").datagrid('getSelections');
				if(rows && rows.length>1){
					window.parent.window.$.messager.alert('提示','请选择单一数据项修改',"info");
				}else{
					var row =$("#dg").datagrid('getSelected');
					if(row){
						pageLoading(window.frames["openFrame"].document);
						$("#openFrame")[0].src="cityAction_toNewinfo?model.cid="+row.id;
						$("#content").dialog({ title:'最新动态', width:600, height:520, closed:true, minimizable:true, maximizable:true, modal:true,
							buttons:[{
								text:'关闭',
								handler:function(){
								$("#content").dialog('close');
								}
							}]
						});
						$("#content").dialog('open');
					}else{
						window.parent.window.$.messager.alert('提示','请先选择相应的项目',"info");
					}
				}
			});
			
			//相册
			$("#btnPhoto").bind('click',function(){
				var rows=$("#dg").datagrid('getSelections');
				if(rows && rows.length>1){
					window.parent.window.$.messager.alert('提示','请选择单一数据项修改',"info");
				}else{
					var row =$("#dg").datagrid('getSelected');
					if(row){
						pageLoading(window.frames["openFrame"].document);
						$("#openFrame")[0].src="cityAction_toPhotoview?model.cid="+row.id;
						$("#content").dialog({ title:'相册', width:800, height:500, closed:true, minimizable:true, modal:true,
							buttons:[{
								text:'关闭',
								handler:function(){
								$("#content").dialog('close');
								}
							}]
						});
						$("#content").dialog('open');
					}else{
						window.parent.window.$.messager.alert('提示','请先选择相应的项目',"info");
					}
				}
			});
			
			var area=$("#comArea").val(); //查询行政区
			
			$("#comArea").combobox({
				onChange:function(newValue,oldValue){  
					area=newValue;
				}  
			});
			
			$("#btnSearch").bind('click',function(){
				if(!isNull('start')) return; //验证日期是否为空
				if(!isNull('end')) return; //验证日期是否为空
				if(!checkdate('start','end')) return;
				$('#dg').datagrid('load',{
					viewType:'query',regionId:area,startDate:$("#start").val(),endDate:$("#end").val()
				});
			});
			
			$("#btnMap").bind('click',function(){
				var rows=$("#dg").datagrid('getSelections');
				if(rows && rows.length>1){
					window.parent.window.$.messager.alert('提示','请选择单一数据项修改',"info");
				}else{
					var row =$("#dg").datagrid('getSelected');
					if(row){
						parent.window.addTab('查看地图','mapAction_locationUI?viewType=loc&type=1&id='+row.id,'');
					}else{
						window.parent.window.$.messager.alert('提示','请先选择相应的项目',"info");
					}
				}
			});
		});
		
		function closeContent(){
			$("#content").dialog('close');
			$('#dg').datagrid('reload');
			//刷新统计图表
			refresh();
		}
		
		function createChart(data){
			return new Highcharts.Chart({
				chart: {
					renderTo: 'container',
					defaultSeriesType: 'column'
				},
				title: {
					text: '市区数据统计'
				},
				subtitle: {
					text: '所有楼盘统计信息'
				},
				xAxis: {
					categories: ['已推盘面积(m²)', '已推盘套数', '已售面积(m²)', '已售套数', '销售均价(元)']
				},
				yAxis: {
					min: 0,
					title: {
						text:'',
						align: 'high'
					}
				},
				tooltip: {
					formatter: function() {
						return '<b>'+ this.x +': '+ this.y +'</b>';
					}
				},
				plotOptions: {
					bar: {
						dataLabels: {																																																																																																																															
							enabled: true,
							color: 'auto'
						}
					}
				},
				legend: {
					layout: 'vertical',
					style: {
						left: 'auto',
						bottom: 'auto',
						right: '50px',
						top: '10px'
					},
					borderWidth: 1,
					backgroundColor: '#FFFFFF'
				},
				credits: {
					enabled: false
				},
			    series: [{
					name: '所有楼盘',
					data: data,
					dataLabels: {
                    	enabled: true
                	}
				}]
			});
		}
		
		function refresh(){
			$.post('cityGrid_getStatisticsData',function(data){
				if(chart && chart!=null){
					chart.series[0].setData(eval(('data')));
				}else{
					chart=createChart(data);
				}
			});
		}
		function openMarker(url,title){
			pageLoading(window.frames["childOpenFrame"].document);
			$("#childOpenFrame")[0].src=url;
			$("#childContent").dialog({ title:title, width:300, height:200,  closed:false,
				maximizable:true,minimizable:true,modal:true,resizable:true,
				buttons:[{
					text:'确定',
						handler:function(){
							childOpenFrame.window.getMarker();
							$("#childContent").dialog('close');
						}
					},{
					text:'关闭',
					handler:function(){
						$("#childContent").dialog('close');
					}
				}]
			});
			$("#childContent").dialog('open');
		}
		function openMap(url,title){
			pageLoading(window.frames["childOpenFrame"].document);
			$("#childOpenFrame")[0].src=url;
			$("#childContent").dialog({ title:title, width:800, height:400,  closed:false,
				maximizable:true,minimizable:true,modal:true,resizable:true,
				buttons:[{
					text:'重绘',
						handler:function(){
							childOpenFrame.window.clear();
						}
					},{
					text:'确定',
						handler:function(){
							childOpenFrame.window.submit();
							$("#childContent").dialog('close');
						}
					},{
					text:'关闭',
					handler:function(){
						$("#childContent").dialog('close');
					}
				}]
			});
			$("#childContent").dialog('open');
		}
		function setLonlat(e){
			openFrame.window.setLonlat(e);
		}
		function setArea(str,center){
			openFrame.window.setArea(str,center);
		}
		function setMarkerName(e){
			openFrame.window.setMarkerName(e);
		}
	</script>
	
</head>

<body style="margin:0px; overflow-style:clear; padding:0px;" >
	<div data-options="region:'north'" style="height:40px;padding:0px;margin:0px;" id="mainsearch">
    	<div id="formsearch" style="padding:10px;">
            	行政区
            	<select id="comArea" class="easyui-combobox" name="comArea" style="width:100px; text-align:center">
            		<option value="-1">全部</option>
            		<c:forEach items="${regions}" var="region">
            			<option value="${region.id }">${region.name }</option>  
            		</c:forEach>
				</select> 
            	开始时间：<input id="start" name="start" type="text" class="Wdate" onclick="WdatePicker({skin:'whyGreen'})"
                			value='<s:date name="model.dateCre" format="yyyy-MM-dd"/>'  />
                                                结束时间：<input id="end" name="end" type="text" class="Wdate" onclick="WdatePicker({skin:'whyGreen'})"
                			value='<s:date name="model.dateCre" format="yyyy-MM-dd"/>'  />
                <a id="btnSearch"  class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
        </div>
    </div>
    <div id="toolbar" style="background:#C9DFFF">
    	<c:if test="${permissionId==1}">
    		<a id="btnAdd"  class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:'true'" style="text-align:center">增加</a>
        	<a id="btnEdit" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:'true'" style="text-align:center">修改</a>
        	<a id="btnDelete" class="easyui-linkbutton" data-options="iconCls:'icon-delete',plain:'true'" style="text-align:center">删除</a>
    	</c:if>
    	
        <a id="btnDetail" class="easyui-linkbutton" data-options="iconCls:'icon-detail',plain:'true'" style="text-align:center">详情</a>
        <a id="btnNew" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:'true'" style="text-align:center">最新动态</a>
        <a id="btnPhoto" class="easyui-linkbutton" data-options="iconCls:'icon-delete',plain:'true'" style="text-align:center">相册</a>
        <a id="btnMap" class="easyui-linkbutton" data-options="iconCls:'icon-detail',plain:'true'" style="text-align:center">查看地图</a>
    </div>
    <div  class="easyui-layout"  data-options="fit:true" style="width:auto; height:auto">
    	<div data-options="region:'north'" style="height:183px;">
        	<table id="dg" data-options="fit:true"> </table>
        </div>
        <div data-options="region:'center'" style="text-align: center;">
        	<div id="container" style="width: 90%; height:80%;margin: 0 auto" ></div>
        </div>
    </div>
    <div id="content">
    	<iframe id="openFrame" name="openFrame"  src="" frameborder="0" style="width:100%;height:95%;"></iframe>
    </div> 
    <div id="childContent">
    	<iframe id="childOpenFrame" name="childOpenFrame" frameborder="0"  src="" style="width:100%;height:98%;"></iframe>
    </div>
</body>
</html>
